<template>
    <el-dialog id="edit-basic"
               append-to-body
               top="10vh"
               :width="dialog.width"
               :visible="dialog.visible"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="close">
        <div slot="title" class="text-center">
            <span class="font-s20 text-bold">
                <icon name="edit"></icon>
                编辑简历 {{ resume.id }} 基本资料
            </span>
        </div>
        <el-descriptions size="medium"
                         label-class-name="detail-label"
                         border
                         :column="2">
            <!-- 姓名 -->
            <el-descriptions-item label="姓名：">
                <el-input v-model="model.name" size="medium" maxlength="15" placeholder="姓名"></el-input>
            </el-descriptions-item>
            <!-- 出生日期 -->
            <el-descriptions-item label="出生日期：">
                <el-date-picker v-model="model.birthday" size="medium" type="date" placeholder="出生日期">
                </el-date-picker>
            </el-descriptions-item>
            <!-- 性别 -->
            <el-descriptions-item label="性别：">
                <el-select v-model="model.sex" value-key="男" size="medium" placeholder="性别">
                    <el-option v-for="item in genderOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <!-- 婚姻 -->
            <el-descriptions-item label="婚姻：">
                <el-select v-model="model.marital" size="medium" placeholder="婚姻">
                    <el-option v-for="item in maritalOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <!-- 身高 -->
            <el-descriptions-item label="身高：">
                <el-input v-model="model.height" size="medium" maxlength="3" placeholder="身高"></el-input>
            </el-descriptions-item>
            <!-- 学历 -->
            <el-descriptions-item label="学历：">
                <el-select v-model="model.education" size="medium" placeholder="学历">
                    <el-option v-for="item in educationOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <!-- 户籍 -->
            <el-descriptions-item label="户籍：">
                <el-cascader :value="model.census"
                             size="medium"
                             :options="areaOptions"
                             @change="handleChangeCascader($event, 'census')"></el-cascader>
            </el-descriptions-item>
            <!-- 经验 -->
            <el-descriptions-item label="工作经验：">
                <el-select v-model="model.work_year" size="medium" placeholder="经验">
                    <el-option v-for="item in workYearOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <!-- 居住地 -->
            <el-descriptions-item label="居住地：">
                <el-cascader :value="model.home_address"
                             size="medium"
                             :options="areaOptions"
                             @change="handleChangeCascader($event, 'home_address')"></el-cascader>
            </el-descriptions-item>
            <!-- 地址 -->
            <el-descriptions-item label="地址：">
                <el-input v-model="model.address" size="medium" placeholder="地址"></el-input>
            </el-descriptions-item>
            <!-- 手机号码 -->
            <el-descriptions-item label="手机号码：">
                <el-input v-model="model.mobile" size="medium" maxlength="13" placeholder="手机号码"></el-input>
            </el-descriptions-item>
            <!-- 邮箱 -->
            <el-descriptions-item label="邮箱：">
                <el-input v-model="model.email" size="medium" placeholder="邮箱"></el-input>
            </el-descriptions-item>
            <!-- QQ -->
            <el-descriptions-item label="QQ 号码：" span="2">
                <el-input v-model="model.qq" size="medium" placeholder="QQ 号码"></el-input>
            </el-descriptions-item>
            <!-- 简历状态 -->
            <el-descriptions-item label="简历状态">
                <el-select v-model="model.resume_status" size="medium" placeholder="简历状态">
                    <el-option v-for="item in resumeStatusOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <!-- 隐私状态 -->
            <el-descriptions-item label="隐私状态">
                <el-select v-model="model.bkresume_status" size="medium" placeholder="隐私状态">
                    <el-option v-for="item in privacyStatusOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
        </el-descriptions>
        <div class="mt-20 text-right">
            <el-button type="text"
                       size="medium"
                       @click="close">取消</el-button>
            <el-button type="primary"
                       size="medium"
                       :loading="saveLoading"
                       @click="save">
                <icon name="save"></icon>
                保存
            </el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { Prop, Emit } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

import functionMixin from '@/mixins/function'
import optionsMixin from '@/mixins/options'

import { toJson, errorMessage, successMessage, isArray } from '@/utils'

const module = namespace('cms/resume')

@Component
export default class EditBasic extends mixins(functionMixin, optionsMixin) {
  @Prop({ type: Object, default: { width: '1000px', visible: false } }) dialog!: any

  // Vuex
  @module.State resume!: any
  @module.Action updateBasic!: (payLoad: any) => Promise<any>

  // form 模型
  public model: any = {}

  // 保存加载状态
  private saveLoading: boolean = false

  /*----- 钩子 -----*/
  created() {
    this.model = toJson(this.resume.basic)
  }

  /**
   * 处理变更选定
   *
   * @param {Array} value 选定值
   * @param {string} field model 属性
   * @return {void}
   */
  private handleChangeCascader(value: Array<number>, field: string): void
  {
    if (isArray(value)) {
      this.model[field] = value[value.length - 1]
    }
  }

  /**
   * 保存
   *
   * @return {void}
   */
  private save(): void
  {
    this.saveLoading = true
    this.updateBasic({ id: this.resume.id, index: this.dialog.index, params: this.model }).then((res: any) => {
      this.saveLoading = false
      if (res.status !== 200) {
        errorMessage(res.message)
        return false
      }

      successMessage(res.message)
      this.close()
    }).catch((err: any) => {
      this.saveLoading = false
    })
  }

  @Emit()
  close(): void {}
}
</script>

<style lang="scss" scoped>

</style>
